import React from "react";
import { Input, Select } from "antd";
import type { GetProps } from "antd";
import { CameraOutlined, SearchOutlined } from "@ant-design/icons";
function BigSearch() {
  type SearchProps = GetProps<typeof Input.Search>;
  const { Search } = Input;
  const suffix = (
    <CameraOutlined
      style={{
        fontSize: 16,
        color: "#1677ff",
      }}
    />
  );
  const suffixs = (
    <SearchOutlined
      style={{
        fontSize: 16,
        color: "#fff",
      }}
    />
  );
  const { Option } = Select;
  const selectBefore = (
    <Select
      defaultValue="全部"
      style={{ width: 100 }}
      dropdownStyle={{ width: 100 }}
    >
      <Option value="全部">全部</Option>
      <Option value="H5">H5</Option>
      <Option value="海报">海报</Option>
      <Option value="长页">长页</Option>
      <Option value="表单">表单</Option>
      <Option value="互动">互动</Option>
      <Option value="电子画册">电子画册</Option>
      <Option value="视频">视频</Option>
      <Option value="解决方案">解决方案</Option>
    </Select>
  );
  const onSearch: SearchProps["onSearch"] = (value, _e, info) =>
    console.log(info?.source, value);
  return (
    <div>
      <Search
        addonBefore={selectBefore}
        placeholder="123"
        enterButton={suffixs}
        size="large"
        suffix={suffix}
        onSearch={onSearch}
      />
    </div>
  );
}

export default BigSearch;
